<template>
	<view class="app l_pages" :style="skin">
		<jnavbar :title="'商户申请'" :PageId="14"></jnavbar>
		<scroll-view class="page_container" scroll-y>
			<block v-if="status == -1">
				<u-gap height="26" bg-color="#f4f4f4"></u-gap>

				<view class="banner"><vimage class="image" imgtype="1" src="static/images/merch.png" mode="widthFix"></vimage></view>
				<u-gap height="26" bg-color="#f4f4f4"></u-gap>
				<view class="content">
					<text class="name">入驻流程</text>
					<view class="content_text">
						<text>1.提交资料</text>
						<text>填写入驻信息，提交经营资质照片等。</text>
					</view>
					<view class="content_text">
						<text>2.审核签约</text>
						<text>等待资质审核（1-3个工作日）</text>
					</view>
					<view class="content_text">
						<text>3.上线活动</text>
						<text>审核通过，给予商家后台权限，进行品牌推广</text>
					</view>
					<u-gap height="72" bg-color="#f4f4f4"></u-gap>
					<u-button shape='circle' class="btns " @click="toapply" type="primary">申请</u-button>
				</view>
				
			</block>
			<block v-else-if="status == 0">
				<view class="applying">
					<vimage class="image" imgtype="1" src="static/images/applying.png"></vimage>
					<text>商户审核中</text>
					<text>请耐心等待</text>
				</view>
			</block>
			<block v-else-if="status == 2">
				<view class="applying">
					<vimage class="image" imgtype="1" src="static/images/apply_er.png"></vimage>
					<text>很遗憾，您未能通过审核</text>
					<u-button shape='circle' type="primary" class="apply_btn" @click="toapply">重新申请</u-button>
				</view>
			</block>
			<block v-else>
				<u-gap height="26" bg-color="#f4f4f4"></u-gap>
				<view class="banner"><vimage class="image" imgtype="1" src="static/images/merch.png" mode="widthFix"></vimage></view>
				<u-gap height="26" bg-color="#f4f4f4"></u-gap>
				<view class="content">
					<text class="name">入驻流程</text>
					<view class="content_text">
						<text>1.提交资料</text>
						<text>填写入驻信息，提交经营资质照片等。</text>
					</view>
					<view class="content_text">
						<text>2.审核签约</text>
						<text>等待资质审核（1-3个工作日）</text>
					</view>
					<view class="content_text">
						<text>3.上线活动</text>
						<text>审核通过，给予商家后台权限，进行品牌推广</text>
					</view>
				</view>
			</block>
		</scroll-view>
		<uni-login ref="Login" @callback="logincallback"></uni-login>
		<tab-bar ref="tabbar" :PageId="14"></tab-bar>
		<nloading></nloading>
	</view>
</template>

<script>
export default {
	onShareAppMessage() {
		return this.wxShare();
	},
	data() {
		return {
			detail: {},
			status: -2,
			// customStyle: {				
			// 	'border-radius': '49rpx',
			// 	'font-size': '34rpx',
			// 	height: '97rpx',
			// 	width: '670rpx'
			// }
		};
	},
	mounted() {
		var _this = this;
		this.$nextTick(a => {
			_this.$refs.tabbar.gettabs();
		});
	},
	computed: {
		skin() {
			return this.$store.state.skin;
		}
	},
	onShow() {
		this.getmerchant();
	},
	methods: {
		getmerchant() {
			this.changeloading({loading: true});
			this.$http('/merchant/apply', {}, 'GET').then(res => {
				this.detail = res.data.msg;

				if (this.detail) {
					this.status = this.detail.status;
				} else {
					this.status = -1;
				}
				this.changeloading({loading: false});
			});
		},
		toapply() {
			this.Jumpurl({
				type: 1,
				link: '../merchant/apply',
				login_type: 2
			});
		},
		logincallback() {}
	}
};
</script>

<style lang="scss">
.banner {
	width: 750rpx;
	.image {
		display: block;
		width: 677rpx;
		height: 440rpx;
		margin: 0 auto;
	}
}
.content {
	border-top: 1px solid #cdcdcd;
	margin: 0 35rpx;
	.name {
		font-size: 40rpx;
		font-weight: bold;
		color: #333333;
		display: block;
		padding: 60rpx 0 40rpx 0;
	}
	.content_text {
		font-size: 28rpx;
		font-weight: bold;
		color: #999999;
		// line-height: 40rpx;
		text {
			display: block;
		}

		text:first-child {
			color: #333333;
			margin-bottom: 20rpx;
			margin-top: 20rpx;
		}
	}
}
// .btns {
// 	margin: 40rpx;
// }

.applying {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	.image {
		width: 368rpx;
		height: 368rpx;
		margin: 192rpx auto 92rpx auto;
	}
	text:nth-child(2) {
		font-size: 36rpx;
		font-weight: 500;
		color: #ff6133;
	}
	text:last-child {
		margin-top: 20rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
	}
	.apply_btn {
		margin-top: 74rpx;
		width: 701rpx;
		height: 80rpx;
	}
}
</style>
